<template>
  <Container>
    <Layouts
      :gutter="24"
      :span="[5, 19]"
      :color="['', '#F0F2F50']"
      v-loading="psLoading"
      :element-loading-text="loadingText"
    >
      <template #left>
        <div class="tagsSelect">
          <!-- <TagsSelect
            :size="'mini'"
            style="margin-left: 10px"
            @call-parent="parentMethod"
            :list="menuItem"
            :types="types"
          /> -->
          <!-- <div
            class="tagsSelect-item"
            :key="index"
            :class="types == item.perms ? 'tagsSelect-items' : ''"
            v-for="(item, index) in menuItem"
            @click="selects(item.perms)"
          >
            {{ item.menuName }}
          </div> -->
          <div class="sidebar-tabs">
            <span
              class="tab-btn"
              style="font-size: 18px"
              :class="{ active: types === item.perms }"
              @click="parentMethod(item.perms)"
              v-for="(item, index) in menuItem"
            >
              {{ item.menuName }}</span
            >
          </div>
          <!-- <el-tabs 
              v-model="types" v-if="menuItem.length > 0" 
              class="cusotm-tabs"
              >
              <el-tab-pane
              v-for="tab in menuItem"
              :key="tab.perms"
              :label="tab.menuName"
              :name="tab.perms"
              >
              </el-tab-pane>
          </el-tabs>  -->
        </div>
        <div style="padding: 0 10px; width: 100%; margin-top: 10px">
          <div class="search-container">
            <el-input
              v-model="patientName"
              placeholder="搜索姓名/电话/身份证号/诊号"
              class="search-input"
              clearable
              @input="handleSearch"
              @clear="handleSearch"
            >
            </el-input>

            <!-- <el-select
            v-model="selectedDate"
            placeholder="选择日期"
            class="date-select"
            @change="handleSearch"
            :suffix-icon="CaretBottom"
          >
            <el-option label="今天" value="today" />
            <el-option label="昨天" value="yesterday" />
            <el-option label="明天" value="tomorrow" />
          </el-select> -->
            <div
              @click="CustomDatePickerShow = !CustomDatePickerShow"
              class="register-date-box"
            >
              {{ formattedVisitDate }}
              <el-icon size="14"><CaretBottom /></el-icon>
            </div>
            <div
              class="register-date-custom-picker"
              v-if="CustomDatePickerShow"
            >
              <DatePickerTime
                @change="CustomDatePickerChange"
                @update:modelValue="CustomDatePickerChange"
                :time="selectedDate"
              ></DatePickerTime>
            </div>
          </div>
          <div
            class="tableList"
            v-if="tableData && tableData?.length > 0"
            :style="tableData.length > 9 ? 'padding-right: 5px;' : ''"
          >
            <div
              class="tableListItem"
              :class="item.execId == execId ? 'tableListItemCheck' : ''"
              @click="selectUser(item)"
              v-for="(item, index) in tableData"
              :key="index"
            >
              <img
                src="@/assets/pharmacy/man.png"
                v-if="item.patientGender === '1'"
                alt=""
              />
              <img
                src="@/assets/pharmacy/woman.png"
                v-if="item.patientGender === '2'"
                alt=""
              />
              <img
                src="@/assets/pharmacy/icon_weizhi_nor.png"
                v-if="item.patientGender === '3'"
              />
              <div class="tableListItem-r">
                <div class="tableListItem-r-l">
                  <span class="text1">{{ item.patientName }}</span>
                  <span
                    class="text1"
                    style="color: #16ada4; font-size: 14px; margin-left: 5px"
                    >{{ item.projectName }}</span
                  >
                  <span
                    class="mrAuto"
                    :class="item.examStatus == '1' ? 'tableListItem-icon' : ''"
                    style="font-size: 14px; color: rgba(0, 0, 0, 0.2)"
                    >{{ item.examStatus == '1' ? '未检查' : '已检查' }}</span
                  >
                </div>
                <div class="tableListItem-r-l">
                  <span
                    class="text2 textOverflow"
                    style=""
                    :title="item.visitNo"
                    >{{ item.visitNo }}</span
                  >
                  <span class="mrAuto text2" v-if="item.orderTime">{{
                    dayjs(item.orderTime).format('HH:mm')
                  }}</span>
                </div>
                <div class="tableListItem-r-l">
                  <!--  -->
                  <span class="text3" v-if="item.totalTimes > 1"
                    >第{{ item.currentTimes }}次/共{{ item.totalTimes }}次</span
                  >
                  <div
                    class="btn"
                    :style="
                      item.auditStatus == '4' ? 'background-color:#D54941;' : ''
                    "
                  >
                    {{ auditStatusText(item.auditStatus) }}
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div
            v-else
            style="
              padding: 0px;
              height: calc(100vh - 225px);
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <el-empty
              :image-size="100"
              :image="emptyImage"
              description="暂无数据"
            />
          </div>
        </div>
      </template>
      <template #right>
        <div class="right" @click="handleUploadSelect2">
          <div class="right-box">
            <div v-if="examInfo != null">
              <el-button
                @click="submitAuditApi"
                v-if="types == 'examination-jc'"
                v-btnPermission="'btn-examination-up'"
                style="position: absolute; top: 7px; right: 0"
                type="primary"
                >提交</el-button
              >
              <el-button
                @click="shenhe"
                v-if="auditStatus == '2' && types == 'examination-sh'"
                v-btnPermission="'btn-examination-examine'"
                style="position: absolute; top: 7px; right: 0"
                type="primary"
                >审核</el-button
              >
              <div class="right-box-nav">
                <img src="@/assets/icon/icon_man_nor.png" alt="" />
                <div>{{ examInfo?.patientName }}</div>
                <div class="right-box-nav-icon"></div>
                <div>{{ genderEnumText(examInfo?.patientGender) }}</div>
                <div class="right-box-nav-icon"></div>
                <div>{{ examInfo?.ageYear || '-' }}</div>
                <div class="unit">岁</div>
                <div>{{ examInfo?.ageMonth || '-' }}</div>
                <div class="unit">月</div>
                <div class="right-box-nav-icon"></div>
                <div>{{ examInfo?.weight || '-' }}</div>
                <div class="unit">kg</div>
                <div class="right-box-nav-icon"></div>
                <div>
                  {{ examInfo?.systolicBp || '-' }}/{{
                    examInfo?.diastolicBp || '-'
                  }}
                </div>
                <div class="unit">mmHg</div>
              </div>
              <div class="right-card">
                <div class="right-card-nav">报告</div>
                <el-descriptions title="" border :column="2">
                  <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                    label="检查项目"
                    >{{ examInfo?.projectName }}</el-descriptions-item
                  >

                  <el-descriptions-item
                    label-class-name="my-label "
                    class-name="my-content"
                    label="申请时间"
                    >{{ examInfo?.orderTime }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                    label="申请科室"
                    >{{ examInfo?.deptName }}</el-descriptions-item
                  >
                  <el-descriptions-item
                    label-class-name="my-label"
                    class-name="my-content"
                    label="申请医生"
                    >{{ examInfo?.doctorName }}</el-descriptions-item
                  >
                </el-descriptions>
              </div>
              <div class="right-card">
                <div
                  class="right-card-nav"
                  style="border-bottom: 1px solid #dcdcdc"
                >
                  检查结果
                  <span v-if="examInfo?.totalTimes && examInfo?.totalTimes != 1"
                    >第{{ examInfo?.currentTimes }} 次/共
                    {{ examInfo?.totalTimes }}次</span
                  >
                </div>
                <div
                  class="right-card-content"
                  style="
                    display: flex;
                    padding: 12px 14px;
                    position: relative;
                    flex-wrap: wrap;
                  "
                >
                  <div
                    class="right-card-content-noimg"
                    style="
                      margin-right: 10px;
                      margin-bottom: 5px;
                      width: auto;
                      padding: 0;
                      background: none;
                    "
                    v-for="(item, index) in fileList"
                    :key="index"
                  >
                    <img
                      src="@/assets/icon/icon_delImg.png"
                      style="cursor: pointer"
                      v-if="types != 'examination-sh'"
                      @click="deleteImg(index)"
                      class="right-card-content-delimg-icon"
                      alt=""
                    />
                    <img :src="item" alt="" style="height: 84px" />
                  </div>
                  <div style="position: relative" @click.stop>
                    <div
                      class="upload-demo"
                      v-if="types != 'examination-sh'"
                      style="cursor: pointer"
                      @click.stop="handleUploadSelect"
                    >
                      <div class="right-card-content-noimg">
                        <img
                          src="@/assets/icon/icon_shangchuan_nor.png"
                          alt=""
                        />
                        <div>请上传图片</div>
                      </div>
                    </div>
                    <imgUpdataSelect
                      ref="updataSelect"
                      @loadingFalse="loadingFalseFun"
                      @updataBd="updataBd"
                      @updataBd2="updataBd2"
                      v-if="imgUpdataSelectBool"
                    ></imgUpdataSelect>
                  </div>

                  <!-- <el-upload
                    class="upload-demo"
                    style="width: 120px"
                    v-if="types != 'examination-sh'"
                    action="#"
                    :show-file-list="false"
                    :http-request="handleUpload"
                    :before-upload="beforeUpload"
                    :auto-upload="true"
                  >
                    <div
                      style="
                        width: 100%;
                        height: 100%;
                        background: transparent;
                        padding: 0;
                      "
                      :loading="uploadLoading"
                    >
                      <div class="right-card-content-noimg">
                        <img src="@/assets/icon/icon_shangchuan_nor.png" alt="" />
                        <div>请上传图片</div>
                      </div>
                    </div>
                  </el-upload> -->
                </div>
              </div>
              <div class="right-card">
                <div
                  class="right-card-nav"
                  style="border-bottom: 1px solid #dcdcdc"
                >
                  检查描述
                </div>
                <div class="right-card-content">
                  <el-input
                    v-model="examDesc"
                    v-if="types != 'examination-sh'"
                    placeholder="请输入"
                  />
                  <span
                    v-else
                    style="font-size: 14px; color: rgba(0, 0, 0, 0.6)"
                  >
                    {{ examDesc }}
                  </span>
                </div>
              </div>
              <div class="right-card">
                <div
                  class="right-card-nav"
                  style="
                    border-bottom: 1px solid #dcdcdc;
                    display: flex;
                    align-items: center;
                  "
                >
                  诊断意见
                  <el-radio-group
                    v-model="diagnosisFlag"
                    :disabled="types == 'examination-sh'"
                    style="margin-left: 20px"
                  >
                    <el-radio
                      :label="item.value"
                      :key="item.value"
                      size="large"
                      v-for="item in diagnosisFlagEnum"
                      >{{ item.text }}</el-radio
                    >
                  </el-radio-group>
                </div>
                <div class="right-card-content">
                  <el-input
                    v-if="types != 'examination-sh'"
                    v-model="diagnosisContent"
                    placeholder="请输入诊断意见内容"
                  />
                  <span
                    v-else
                    style="font-size: 14px; color: rgba(0, 0, 0, 0.6)"
                  >
                    {{ diagnosisContent }}
                  </span>
                </div>
              </div>
            </div>
            <div
              v-else
              style="
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <el-empty
                :image-size="260"
                :image="emptyImage"
                placeholder="暂无数据"
              />
            </div>
          </div>

          <div class="right-card-container">
            <div class="right-card">
              <div class="right-card-title">历史报告</div>
              <div style="padding: 0 10px 10px 10px" v-if="historyLis.length">
                <el-collapse accordion style="width: 100%">
                  <el-collapse-item
                    :name="index"
                    v-for="(item, index) in historyLis"
                    style="border-bottom: 1px solid #dddddd"
                    :key="index"
                  >
                    <template #title>
                      <div style="padding: 0 10px">
                        {{ item.projectName }}
                        <span style="float: right">{{
                          item.examTime?.split(' ')[0]
                        }}</span>
                      </div>
                    </template>
                    <div class="right-card-content">
                      <div class="right-card-content-title">报告影像</div>
                      <div
                        class="right-card-content-noimg"
                        style="display: flex; width: 100%; flex-wrap: wrap"
                        v-if="item.examImageList"
                      >
                        <img
                          :src="items"
                          v-for="(items, index2) in item.examImageList.split(
                            ','
                          )"
                          @click="
                            selectImg(item.examImageList.split(','), index2)
                          "
                          :key="index"
                          style="
                            object-fit: contain;
                            margin-bottom: 10px;
                            width: 72px;
                            height: 72px;
                            margin-right: 10px;
                            background: #dcdcdc;
                          "
                          alt=""
                        />
                      </div>
                      <div class="dashed"></div>
                      <div
                        class="right-card-content-title"
                        style="margin-top: 10px"
                      >
                        查验描述
                      </div>
                      <div class="right-card-content-item">
                        <div>{{ item.examDesc }}</div>
                      </div>
                      <div class="dashed"></div>
                      <div
                        class="right-card-content-title"
                        style="margin-top: 10px"
                      >
                        诊断意见
                      </div>
                      <div class="right-card-content-item">
                        <div>
                          {{ item.diagnosisFlag == '1' ? '阳性' : '阴性' }}
                        </div>
                      </div>
                      <div class="dashed"></div>
                      <div
                        class="right-card-content-title"
                        style="margin-top: 10px"
                      >
                        制单信息
                      </div>
                      <div class="right-card-content-item">
                        <div>检查人员：{{ item.examEmpName }}</div>
                        <div>检查时间：{{ item.examTime }}</div>
                        <div>审核人员：{{ item.auditBy }}</div>
                        <div>审核时间：{{ item.auditTime }}</div>
                        <div>审核意见：{{ item.refuseReason }}</div>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
              <div
                v-if="historyLis.length == 0"
                style="
                  height: 90%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                <el-empty
                  :image="emptyImage"
                  description="暂无数据"
                  :image-size="100"
                />
              </div>
            </div>
          </div>
        </div>
        <auditExam ref="auditExamRef" @closeDrawer="getExamListApi"></auditExam>
        <ImgYl
          :visible="Imgvisible"
          v-if="Imgvisible"
          :images="images"
          :initialIndex="initialIndex"
          :onClose="handleImgClose"
        />
      </template>
    </Layouts>
  </Container>
</template>
<script setup lang="ts">
import { CaretBottom, ArrowUpBold } from '@element-plus/icons-vue';
import emptyImage from '@/assets/icon/internet_empty_illustration.svg';
import {
  getExamList,
  getAuditList,
  submitAudit,
  getExamDetail,
  getOrderExamHistoryList,
} from '@/api/exam/index';
import dayjs from 'dayjs';
import type {
  GetExamForm,
  ExamInfo,
  ExamDetail,
  ExamHistoryInfo,
  OrderExamHistoryResponse,
} from '@/types/exam';
import { uploadFile } from '@/api/basedata/index';
import imgUpdataSelect from '../examinationTest/updataSelect.vue';

import auditExam from './auditExam.vue';
const auditExamRef = ref<InstanceType<typeof auditExam>>();
const route = useRoute();
import stores from '@/store';
const psLoading = ref<boolean>(false);
const CustomDatePickerShow = ref<boolean>(false);
// 获取权限菜单
let menuList = ref<any>(
  await stores.useBaseDataStore().findMenuList(route.query.menuId)
);

const types = ref<string>(); // 默认选中标签
let menuItem = ref<any>(
  menuList.value.filter((item: any) => item.menuType == 2)
);
if (menuItem.value.length > 0) {
  types.value = menuItem.value[0].perms; // 默认选中标签
}

const diagnosisFlagEnum = ref<any>(
  stores.useBaseDataStore().getEnumSelect('diagnosisFlagEnum')
);

const imgUpdataSelectBool = ref<boolean>(false);

//图片
const updataBd = (file: any) => {
  // imgUpdataSelectBool.value = false;
  //console.log(file,'file');

  fileList.value.push(file);
};
const updataBd2 = (file: any) => {
  //console.log('🎯 updataBd2 被调用！');
  //console.log('📥 接收到文件:', file);
  //console.log('📋 当前 fileList:', JSON.stringify(fileList.value));

  // 添加文件到列表
  fileList.value.push(file);

  //console.log('📋 更新后 fileList:', JSON.stringify(fileList.value));
  //console.log('📋 fileList 长度:', fileList.value.length);

  // 强制触发响应式更新
  fileList.value = [...fileList.value];

  //console.log('✅ 强制更新完成，准备隐藏子组件');

  // 接收到数据后立即隐藏子组件
  nextTick(() => {
    //console.log('⏰ 隐藏上传组件');
    imgUpdataSelectBool.value = false;
  });
};

const loadingText = ref('');
const loadingFalseFun = (e: any, text: any) => {
  psLoading.value = e;
  loadingText.value = text;
};
const handleUploadSelect = () => {
  setTimeout(() => {
    imgUpdataSelectBool.value = !imgUpdataSelectBool.value;
  }, 200);
};
const handleUploadSelect2 = () => {
  // 点击右侧区域时隐藏上传组件
  setTimeout(() => {
    imgUpdataSelectBool.value = false;
  }, 200);
};
//图片列表
const images = ref<any[]>([]);
const Imgvisible = ref<boolean>(false);
const initialIndex = ref<number>(0);

const selectImg = (list: any, index: number) => {
  let img: any = [];
  list.forEach((item: any) => {
    img.push({
      thumbnailUrl: item,
      url: item,
      alt: '缩略图',
    });
  });
  images.value = img;
  initialIndex.value = index;
  Imgvisible.value = true;
};
const handleImgClose = () => {
  Imgvisible.value = false;
};
//检查状态
const examStatusEnum = ref<any>(
  stores.useBaseDataStore().getEnumSelect('examStatusEnum')
);
//审核状态
const examAuditStatusEnum = ref<any>(
  stores.useBaseDataStore().getEnumSelect('examAuditStatusEnum')
);
//性别
const genderEnum = ref<any>(
  stores.useBaseDataStore().getEnumSelect('genderEnum')
);

// 日期显示：若为今天显示“今天”，否则显示 MM-DD
const formattedVisitDate = computed(() => {
  const val = selectedDate.value;
  if (!val) return '';
  const current = dayjs();
  const target = dayjs(val);
  if (!target.isValid()) return '';
  return target.isSame(current, 'day') ? '今天' : target.format('MM-DD');
});
const CustomDatePickerChange = (date: any) => {
  // 为空直接关闭
  if (!date) {
    CustomDatePickerShow.value = false;
    return;
  }

  // 规范化为 YYYY-MM-DD 字符串
  const next = dayjs(date).isValid()
    ? dayjs(date).format('YYYY-MM-DD')
    : String(date);
  selectedDate.value = next;
  formData.value.visitDate = next;
  // patientId.value = null;
  CustomDatePickerShow.value = false;
  execId.value = '';
  getExamListApi();
};
//样本类型

const sampleTypeEnum = ref<any>(
  stores.useBaseDataStore().getEnumSelect('labSampleTypeEnum')
);
const auditStatusText = (val: any) => {
  for (let index = 0; index < examAuditStatusEnum.value.length; index++) {
    let item = examAuditStatusEnum.value[index];
    if (val == item.value) {
      return item.text;
    }
  }
};
const genderEnumText = (val: any) => {
  for (let index = 0; index < genderEnum.value.length; index++) {
    let item = genderEnum.value[index];
    if (val == item.value) {
      return item.text;
    }
  }
};
const sampleTypeEnumText = (val: any) => {
  for (let index = 0; index < sampleTypeEnum.value.length; index++) {
    let item = sampleTypeEnum.value[index];
    if (val == item.value) {
      return item.text;
    }
  }
};

// //console.log(settleStatusEnum);

const selectedDate = ref('today');
const patientName = ref('');
const examDesc = ref('');
const diagnosisFlag = ref('');
const diagnosisContent = ref('');
const execId = ref<any>('');
const examStatus = ref<any>('');
const auditStatus = ref<any>('');
const fileList = ref<any[]>([]);
const uploadLoading = ref(false);

const examInfo = ref<ExamDetail>();
//时间
const today = computed(() => {
  const date = new Date();
  return date.toISOString().split('T')[0]; // YYYY-MM-DD格式
});

const tomorrow = computed(() => {
  const date = new Date();
  date.setDate(date.getDate() + 1);
  return date.toISOString().split('T')[0];
});

const yesterday = computed(() => {
  const date = new Date();
  date.setDate(date.getDate() - 1);
  return date.toISOString().split('T')[0];
});

const deleteImg = (index: number) => {
  fileList.value.splice(index, 1);
};

const parentMethod = (e: string) => {
  imgUpdataSelectBool.value = false;
  types.value = e;
  tableData.value = [];
  historyLis.value = [];
  execId.value = '';
  examInfo.value = undefined;
  getExamListApi();
};
const handleUpload = async (options: any) => {
  const { file } = options;
  uploadFile(file, file.name).then((res) => {
    fileList.value.push(res.data);
  });
};
//文件上传
const beforeUpload = (file: any) => {
  // 验证文件类型
  const isImage = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isImage) {
    //ElMessage.error('只能上传 JPG/PNG 格式的图片');
    return false;
  }
  return true;
};

//列表参数
const formData = ref<GetExamForm>({
  projectCategory: '1',
  patientName: '',
  visitDate: dayjs().format('YYYY-MM-DD'),
  pageNo: 1,
  pageSize: 1000,
});

const tableData = ref<ExamInfo[]>();

//列表
const getExamListApi = async () => {
  // execId.value = '';
  examInfo.value = undefined;
  historyLis.value = [];
  let data = {
    projectCategory: '1',
    patientName: patientName.value,
    visitDate: formData.value.visitDate,
    pageNo: formData.value.pageNo,
    pageSize: formData.value.pageSize,
  };
  if (types.value == 'examination-jc') {
    let res = await getExamList(data);
    if (res.code != '200') {
      tableData.value = [];
      //ElMessage.error(res.msg);
      return;
    }
    tableData.value = res.data;
    if (res.data.length) {
      if (execId.value == '') {
        execId.value = res.data[0]?.execId;
        examStatus.value = res.data[0]?.examStatus;
        historyForm.value.patientId = res.data[0]?.patientId;
        getOrderExamHistoryListApi();
        getExamDetailApi();
        return;
      }
      for (let index = 0; index < res.data.length; index++) {
        if (execId.value == res.data[index]?.execId) {
          examStatus.value = res.data[index]?.examStatus;
          historyForm.value.patientId = res.data[index]?.patientId;
          getOrderExamHistoryListApi();
          getExamDetailApi();

          return;
        }
      }
    }
  } else {
    let res = await getAuditList(data);
    if (res.code != '200') {
      tableData.value = [];
      //ElMessage.error(res.msg);
      return;
    }
    if (res.data.length) {
      tableData.value = res.data;
      if (execId.value == '') {
        execId.value = res.data[0]?.execId;
        auditStatus.value = res.data[0]?.auditStatus;
        historyForm.value.patientId = res.data[0]?.patientId;
        getExamDetailApi();

        getOrderExamHistoryListApi();
        return;
      }
      if (res.data.length) {
        for (let index = 0; index < res.data.length; index++) {
          if (execId.value == res.data[index]?.execId) {
            auditStatus.value = res.data[index]?.auditStatus;
            historyForm.value.patientId = res.data[index]?.patientId;
            getExamDetailApi();

            getOrderExamHistoryListApi();
            return;
          }
        }
      }

      // auditStatus.value = res.data[0]?.auditStatus;
      // execId.value = res.data[0]?.execId;
      // historyForm.value.patientId = res.data[0]?.patientId;
      // getOrderExamHistoryListApi();
    }
  }
};
const historyForm = ref<OrderExamHistoryResponse>({
  patientId: null,
  projectCategory: '1',
  pageNo: 1,
  pageSize: 10000,
});
let historyLis = ref<ExamHistoryInfo[]>([]);
const getOrderExamHistoryListApi = async () => {
  let res = await getOrderExamHistoryList(historyForm.value);
  if (res.code != '200') {
    //ElMessage.error(res.msg);
    return;
  }
  historyLis.value = res.data;
};

//提交检查
const submitAuditApi = async () => {
  imgUpdataSelectBool.value = false;
  let data = {
    execId: execId.value,
    examDesc: examDesc.value,
    diagnosisFlag: diagnosisFlag.value,
    diagnosisContent: diagnosisContent.value,
    examImageList: fileList.value.join(','),
  };
  let res: any = await submitAudit(data);
  if (res.code == '200') {
    ElMessage({
      message: res.msg,
      type: 'success',
      duration: 2000,
    });
    getExamListApi();
  }
};

//选择审核
const shenhe = () => {
  imgUpdataSelectBool.value = false;
  auditExamRef.value?.open(execId.value);
};

//选择检查
const selectUser = (row: ExamInfo) => {
  imgUpdataSelectBool.value = false;
  execId.value = row.execId;
  examStatus.value = row?.examStatus || '';
  auditStatus.value = row?.auditStatus || '';
  historyForm.value.patientId = row?.patientId;
  // images.value = [];
  // initialIndex.value = 0;
  // Imgvisible.value = false;
  getExamDetailApi();
  getOrderExamHistoryListApi();
};

const selects = (value: any) => {
  // getExamListApi();
  types.value = value;
};
//详情
const getExamDetailApi = async () => {
  psLoading.value = true;
  loadingText.value = '';
  fileList.value = [];
  examInfo.value = undefined;
  examDesc.value = '';
  diagnosisFlag.value = '';
  diagnosisContent.value = '';
  let res = await getExamDetail(execId.value);

  if (res.code != '200') {
    //ElMessage.error(res.msg);
    psLoading.value = false;

    return;
  }

  examInfo.value = res.data;
  examDesc.value = res.data.examDesc ?? '';
  diagnosisFlag.value = res.data.diagnosisFlag ?? '';
  diagnosisContent.value = res.data.diagnosisContent ?? '';
  //console.log(res.data);
  psLoading.value = false;

  if (res.data.examImageList) {
    fileList.value = res.data.examImageList.split(',');
  }
};
//选择时间
const handleSearch = () => {
  tableData.value = [];
  execId.value = '';

  // if (selectedDate.value == 'today') {
  //   formData.value.visitDate = today;
  // } else if (selectedDate.value == 'tomorrow') {
  //   formData.value.visitDate = tomorrow;
  // } else if (selectedDate.value == 'yesterday') {
  //   formData.value.visitDate = yesterday;
  // }

  imgUpdataSelectBool.value = false;
  examInfo.value = undefined;
  execId.value = '';
  formData.value.patientName = patientName.value;
  getExamListApi();
};

getExamListApi();
onMounted(() => {
  selectedDate.value = dayjs().format('YYYY-MM-DD');
});
</script>
<style lang="scss" scoped>
.sidebar-tabs {
  flex-shrink: 0;
  display: flex;
  gap: 24px;
  height: 52px;
  padding-left: 22px;
  border: 1px solid #e7e7e7;

  .tab-btn {
    cursor: pointer;
    font-weight: 400;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.4);
    line-height: 52px;
    text-align: left;
    font-style: normal;
    text-transform: none;
    position: relative;

    &.active {
      font-weight: 400;
      font-size: 18px;
      color: #18b3ab;
      text-align: left;
      font-style: normal;
      text-transform: none;
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: #18b3ab;
      }
    }
  }
}
.nav {
  ::v-deep(.el-tabs__item) {
    width: 90px !important; /* 设置每个tab的宽度 */
    padding: 0 !important; /* 去除默认padding */
    font-size: 16px !important; /* 设置字体大小 */
    margin: 0 10px;
  }
  ::v-deep(.el-tabs__nav-wrap:after) {
    height: 1px !important;
  }
}
.right-card {
  :deep(.el-input__inner) {
    padding: 0 !important;
    box-shadow: 0 0 0 0;
  }
  :deep(.el-input__wrapper) {
    padding: 0 !important;
    box-shadow: 0 0 0 0;
  }
  ::v-deep(.el-tabs__header) {
    margin: 0;
  }
}

.textOverflow {
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: nowrap;
  width: 170px;
}
.search-container {
  display: flex;
  gap: 2px;
  align-items: center;
  position: relative;
  .search-input {
    flex: 1;
    width: 182px;
  }
  .date-select {
    width: 48px;
  }
}
.mrAuto {
  margin-left: auto;
}
.tableList {
  padding: 0;
  height: calc(100vh - 170px);
  overflow: auto;
  margin-top: 10px;
  .tableListItem {
    padding: 10px 12px;
    cursor: pointer;
    border-radius: 6px 6px 6px 6px;
    display: flex;
    border: 1px solid transparent;
    img {
      margin: 2px;
      width: 16px;
      height: 16px;
    }
    .tableListItem-r {
      margin-left: 5px;
      flex: 1;
      .btn {
        padding: 0px 4px;
        background: #e37318;
        border-radius: 3px 3px 3px 3px;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.9);
        margin-left: auto;
        height: 20px;
        line-height: 19px;
      }
      .text2 {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 13px;
        color: rgba(0, 0, 0, 0.7);
        line-height: 22px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .text3 {
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.3);
        line-height: 22px;
        font-style: normal;
        text-transform: none;
      }
      .tableListItem-r-l {
        display: flex;
        margin-bottom: 5px;
        align-items: center;
        .text1 {
          font-size: 15px;
        }
        .tableListItem-icon {
          position: relative;
          color: #000 !important;
        }
        .tableListItem-icon::before {
          content: '';
          width: 6px;
          height: 6px;
          position: absolute;
          left: -10px;
          top: 6px;
          background: #e37318;
          border-radius: 50%;
        }
      }
      .tableListItem-r-l:nth-of-type(3) {
        margin: 0;
      }
    }
  }
  .tableListItemCheck {
    background: rgba(24, 179, 171, 0.1);
    border: 1px solid #16ada4;
  }
}
.right-box {
  width: 78%;
  flex: 1;
  position: relative;
  .right-box-nav {
    background: #fdfdfd;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #dcdcdc;
    padding: 12px 8px;
    display: flex;
    font-size: 13px;
    align-items: center;
    width: 400px;
    div {
      margin-right: 3px;
    }
    .right-box-nav-icon {
      width: 1;
      height: 20px;
      border-right: 1px dashed #dcdcdc;
      margin: 0 12px;
    }
    .unit {
      color: rgba(0, 0, 0, 0.6);
    }
    img {
      margin-right: 5px;
      width: 16px;
      margin-top: 1px;
      height: 16px;
    }
  }
  .right-card {
    background: #fff;
    border-radius: 12px;
    margin: 12px 0;
    .right-card-nav {
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.9);
      text-align: left;
      font-style: normal;
      display: flex;
      > span {
        margin-left: auto;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 12px;
        color: rgba(0, 0, 0, 0.3);
        line-height: 22px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      text-transform: none;
      padding: 10px 17px;
    }
    .right-card-content {
      padding: 12px 17px;
      .right-card-content-noimg {
        width: 120px;
        position: relative;
        background: #eeeeee;
        border-radius: 6px 6px 6px 6px;
        padding: 27px 25px;
        .right-card-content-delimg-icon {
          position: absolute;
          width: 16px;
          height: 16px;
          right: 0;
          top: 0;
        }
        img {
          display: block;
          margin: auto;
        }
        > div {
          text-align: center;
          width: 100%;
          font-weight: 400;
          font-size: 14px;
          color: #cccccc;
          font-style: normal;
          text-transform: none;
        }
      }
    }
  }
}
.right {
  height: 100%;
  display: flex;
}
.right-card-container {
  width: 280px;
  height: 100%;
  margin-left: 17px;
  background-color: rgba(253, 253, 253, 0.6);
  .right-card {
    width: 100%;
    height: 100%;
    overflow: auto;
    .right-card-title {
      width: 100%;
      border-radius: 0px 0px 0px 0px;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 600;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.9);
      padding: 15px 17px;
      line-height: 22px;
      border-bottom: 1px solid #e7e7e7;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .right-card-content {
      border-radius: 6px 6px 6px 6px;
      border: 1px solid #dcdcdc;
      padding: 8px 10px;
      .right-card-content-title {
        width: 248px;
        line-height: 22px;
        font-weight: bold;
        font-size: 11px;
        color: rgba(0, 0, 0, 0.6);
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .dashed {
        border-bottom: 1px dashed #dcdcdc;
        margin-top: 10px;
      }
      .right-card-content-item {
        font-weight: 400;
        font-size: 11px;
        color: rgba(0, 0, 0, 0.6);
        line-height: 18px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
    .right-card-content-noimg {
      width: 72px;
      margin: 5px 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
:deep(.my-label) {
  background-color: #fff !important;
  width: 120px;
  color: #999 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
:deep(.my-content) {
  color: #999 !important;
  width: 400px;
}

:deep(.el-radio.el-radio--large) {
  height: 20px;
}
:deep(.el-radio) {
  margin-right: 20px;
}
:deep(.el-collapse-item__wrap) {
  background-color: transparent; /* 浅灰色背景 */
  border: none; /* 可选：去除默认边框 */
}
:deep(.el-collapse-item__header) {
  background-color: transparent; /* 浅灰色背景 */
  border: none; /* 可选：去除默认边框 */
  font-weight: 400;
  font-size: 13px;
  color: rgba(0, 0, 0, 0.9);
  line-height: 22px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
:deep(.el-upload) {
  height: auto;
  width: 100%;
}
:deep(.upload-demo .el-button:active) {
  background-color: transparent;
  border-color: transparent;
}
.register-date-custom-picker {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2000;
  margin-top: 4px;
  background: #fff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  padding: 8px 8px 4px;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.register-date-box {
  cursor: pointer;
  text-align: right;
  margin-left: 10px;
  // width: 88px;
}
</style>
<style lang="scss">
.date-select {
  .el-select__wrapper {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    padding: 0 !important;
  }

  .el-input__inner {
    color: var(--el-color-primary) !important;
    font-weight: 500 !important;
  }

  // 设置后缀图标颜色为黑色
  .el-icon {
    color: #000 !important;
  }
}
</style>
